<!--{block return}-->
<style>
.unslider{overflow:auto;margin:0;padding:0}.unslider-wrap{position:relative}.unslider-wrap.unslider-carousel li{float:left}.unslider-vertical>ul{height:100%}.unslider-vertical li{float:none;width:100%}.unslider-fade{position:relative}.unslider-fade .unslider-wrap li{position:absolute;left:0;top:0;right:0;z-index:8}.unslider-fade .unslider-wrap li.unslider-active{z-index:10}.unslider li,.unslider ol,.unslider ul{list-style:none;margin:0;padding:0;border:none}.unslider-arrow{position:absolute;left:20px;z-index:2;cursor:pointer}.unslider-arrow.next{left:auto;right:20px}
.unslider-nav ol {
  list-style: none;
  text-align: center;
}
.unslider-nav ol li {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 4px;
  background: transparent;
  border-radius: 5px;
  overflow: hidden;
  text-indent: -999em;
  border: 2px solid #fff;
  cursor: pointer;
}
.unslider-nav ol li.unslider-active {
  background: #fff;
  cursor: default;
}
	#bindbook{height: 190px;position: relative;overflow:hidden;}
	#bindbook .unslider-nav{position: absolute;bottom: 0;left: 0;right: 0;}
	#bindbook .unslider-nav li {width: 8px;height: 8px;background: rgba(255,10,10,.5);}
	#bindbook .unslider-nav ol li.unslider-active {background: rgba(255,0,0,1);}
	#bindbook ul{margin:10px auto;}
	#bindbook ul li{margin:0;padding:0;}
	#bindbook .uk-thumbnail{display: inline-block;width: 12%;overflow: hidden;position: relative;height: 160px;text-align: center;}
	#bindbook .uk-thumbnail img{height: 100%;max-width: 100%;}

	#bindbook .bookname {position: absolute;bottom: 0;left: 0;right: 0;padding:8px 0;background: rgba(255,255,255,.85);font-size: 14px;white-space: nowrap;overflow: hidden;width: 100%;text-overflow: ellipsis;}
	.none {display: none !important;}
</style>
<div id="bindbook" class="bindbook cl mbm mtm">
	<div class="img-slider">
		<ul class="cl">
			<li>
			{loop $books $key $book}
				{if $key && (($key%8) < 1)}
					</li><li class="none">
				{/if}
					<div class="uk-thumbnail">
						<a href="./plugin.php?id=jameson_read&contrl=index&act=book&book_id={$book['book_id']}">
					    	<img src="{if $book['image']}./data/attachment/forum/{$book['image']}{else}{$_G['jameson_read']['morenfengmian']}{/if}" alt="">
						    <div class="bookname">
						    	[{$book['book_name']}]
						    </div>
					    </a>
					</div>
			{/loop}
			</li>
		</ul>
	</div>
</div>
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
	var xifeng = jQuery.noConflict(true);
	(window.jQuery && jQuery().jquery > '2.0.0') || (window.jQuery = xifeng);
</script>
<script src="./source/plugin/jameson_read/images/unslider.min.js"></script>
<script type="text/javascript">
	jQuery(function(){
		if (xifeng('.img-slider').length && xifeng('.img-slider .uk-thumbnail').length > 8) {
		    xifeng('.img-slider').unslider({
		        autoplay: true,
		        arrows: false,
		        delay:10000
		    });
		    xifeng('.img-slider .none').removeClass('none')
		}
		
	})
</script>
<!--{/block}-->